import { useLocation, Outlet, useModel } from "@umijs/max";
import { App, FloatButton } from "antd";
import Header from "./components/Header";
import Footer from "./components/Footer";
import AppWrapper from "./components/AppWrapper";
import { setTwoToneColor } from '@ant-design/icons';
import { Fragment, useEffect } from "react";
import { tokenStorage } from "@/utils/storage";
import DiffBtn from "@/layouts/components/DiffBtn";
import RouteLoading from "@/loading";
import theme from "@/theme";
import ConfigProvider from "@/components/ConfigProvider";

setTwoToneColor(theme.primary);

export default function (){
  const {pathname} = useLocation();

  const {runAsync} = useModel('user', ({runAsync})=>({runAsync}));

  const {data: globalConfigData} = useModel('global-config', ({data})=>({data}));

  useEffect(()=>{
    if(tokenStorage.get()){
      runAsync();
    }
  },[]);

  return <ConfigProvider>
    <App>
      <AppWrapper>
        {
          globalConfigData ? (
            !pathname.startsWith('/pure/') ? <div className="min-h-screen flex flex-col main-layout" style={{minWidth: 'var(--content-min-width)'}}>
              <Header />
              <div className="flex-1 min-h-0 relative" style={{marginTop: 'var(--header-height)'}}>
                <Outlet />
              </div>
              <Footer />
              <DiffBtn />
              <FloatButton.BackTop />
            </div> : <Outlet />
          ) : <RouteLoading isDynamicImportLoading={false} />
        }
      </AppWrapper>
    </App>
  </ConfigProvider>
}
